 <template>
  <div class="bg_page">

    <pull-refresh :bottom="panelBottom" ref="pullRefreshPanel" id="scrollPanel" :background-color="'#f6f6f6'" :top="0" :enableRefresh="true" @refresh="refreshData">
      <div class="top_block pt_fix_iphoneX">
        <div class="swift_slogan">
            <!-- <img class="slogan_icon" src="~@/assets/imgs/common/swift_icon1.png" alt=""> -->
        </div>
        <!-- <div class="sales_volume">
          <span>累计售出</span>
          <span class="num">23570</span>
          <span>件</span>
        </div> -->
      </div>
      <div class="bottom_block">

        <div class="slogan_block">
          <div class="slogan_item">
            <div class="slogan_top">
              <img class="slogan_icon" src="~@/assets/imgs/common/swift_icon1.png" alt="">
            </div>
            <div class="slogan_title">专业质检</div>
            <div class="slogan_content">权威质检团队</div>
          </div>

          <div class="slogan_item">
            <div class="slogan_top">
              <img class="slogan_icon" src="~@/assets/imgs/common/swift_icon2.png" alt="">
            </div>
            <div class="slogan_title">放心买</div>
            <div class="slogan_content">杜绝虚假交易</div>
          </div>

          <div class="slogan_item">
            <div class="slogan_top">
              <img class="slogan_icon" src="~@/assets/imgs/common/swift_icon3.png" alt="">
            </div>
            <div class="slogan_title">省心卖</div>
            <div class="slogan_content">优先展示卖得快</div>
          </div>
        </div>

        <div class="goods_list_block">
          <goods-list :list="goodsListData"></goods-list>
        </div>
        
        <div class="no_data_block" v-if="goodsListData.length == 0 && !isLoading">
          <no-data-panel></no-data-panel>
        </div>
        

      
        
        <div>
          <infinite-load v-if="goodsListData.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
        </div>
      </div>

    </pull-refresh>
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue"
import PullRefresh from "@/components/pullRefresh.vue";
import infiniteLoad from '@/components/infiniteLoad.vue';
import goodsList from '@/views/common/goodsList/goodsList.vue';
import {mapState,mapActions} from 'vuex';
export default {
  props: {
   
  },
  components:{
    HeaderBar,
    PullRefresh,
    infiniteLoad,
    goodsList
  },
  mounted() {

  },
  data() {
    return {
      panelBottom:0,
      scrollTarget: '#scrollPanel',

      isLoading: false,
      isNomre: false,
      tipsShow: false,

      goodsListData:[],
      currentPage:1
    }
  },
  computed: mapState({
    headerHeight: state => state.headerHeight,
  }),
  created() {
    this.getFastSaleList();
  },
  filters:{
    amountFormat(value,flag) {
    	if (!value) return;
    	value = value*1;
    	let result;
    	if(flag){
    		value = value.toFixed(0);
    	}else{
    		value = value.toFixed(2);
    	}
      result = value.replace(/\B(?=(\d{3})+\b)/g,',');
      return result
    }
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getFastSaleList(done){
      if(!done && this.currentPage == 1){
        this.toggleLoading({flag:true});
        this.isLoading = true;
      }
      this.$ajax.getFastSaleList({
        queryBody:{
          // status:'sale',
          // isNew:'Y',
          // source:'aishangjie'
        },
        page:{
          size:10,
          current:this.currentPage
        }
      }).then((res)=>{
        this.toggleLoading({flag:false});
        if(this.isLoading){
          this.isLoading = false;
        };
        if(res.code == '0000'){
          if(!this.tipsShow){
            this.tipsShow = true;
          };

          // 测试用
          // if(this.currentPage == 5){
          //   res.data.records =  [{},{},{},{},{},{},{},{}];
          // }else{
          //   res.data.records = [{},{},{},{},{},{},{},{},{},{}];
          // }
      
          if(res.data.records.length < 10){
            this.isNomre = true;
          }
          if(done){
            done();
          }

          if(this.currentPage == 1){
            this.goodsListData = res.data.records;
          }else{
            this.goodsListData = [...this.goodsListData,...res.data.records];
          }
        };
      });
    },
    refreshData(done){
      this.isLoading = false;
      this.isNomre =  false;
      this.tipsShow = false;
      this.currentPage = 1;
      this.getFastSaleList(done)
    },
    getNextData(){
      this.isLoading = true;
      this.currentPage++;
      this.getFastSaleList()
    }
  }
}
</script>

<style lang="less" scoped>
.bg_page{
  min-height: 100%;
}
.top_block{
  box-sizing: content-box;
  height: 3.76rem;
  // background:linear-gradient(90deg,rgba(36,219,120,1) 0%,rgba(9,185,103,1) 100%);
  background: url(~@/assets/imgs/common/swift_bg.png) no-repeat 100% 100%;
  background-position: left bottom;
  background-size: 100% auto;
  position: relative;
  .sales_volume{
    position: absolute;
    bottom: 0.84rem;
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    font-size: 0.32rem;
    line-height: 0.36rem;
    color: #fff;
    .num{
      font-size: 0.56rem;
      font-family: din-bold;
      line-height: 0.6rem;
      margin:0 0.08rem;
      color: #FFDE5E;
    }
  }
}

/* x,xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .pt_fix_iphoneX {
        padding-top: 0.48rem!important;
    }
  }
  /* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .pt_fix_iphoneX {
        padding-top: 0.48rem!important;
    }
  }
  
 /* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .pt_fix_iphoneX {
        padding-top: 0.48rem!important;
    }
}
.bottom_block{
   width: 100%;
   position: relative;
   top:-0.9rem;
}
.goods_list_block{
  padding: 0.2rem 0 0.2rem 0.2rem;
  background-color: #f6f6f6;
}

.slogan_block{
  height: 2.1rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-radius: 0.4rem 0.4rem 0 0;
  padding: 0 0.4rem;
  padding-top: 0.2rem;
  .slogan_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    .slogan_top{
      margin-bottom: 0.04rem;
      .slogan_icon{
        width: 0.84rem;
        height: 0.84rem;
      }
    }
    .slogan_title{
       font-size: 0.28rem;
       color: #666;
       line-height: 0.36rem;
       margin-bottom: 0.04rem;
    }
    .slogan_content{
       font-size: 0.24rem;
       color: #999;
       line-height: 0.32rem;
    }
  }
}

.no_data_block{
  padding-top: 1.6rem;
}

</style>
